import React, { useState } from 'react'
import { ResultPage, Swiper, Image } from 'antd-mobile'
import { UndoOutline } from 'antd-mobile-icons'
import { useNavigate } from 'react-router-dom'
// import {useSelector,useDispatch} from 'react-redux'

import './index.css'
function Index() {
  const navigate = useNavigate()
  // const dispatch=useDispatch()
  const img = ([
    'https://images.unsplash.com/photo-1567945716310-4745a6b7844b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=60',

  ])
  return (
    <div>
      <ResultPage
        status=''
        title='火车票预定'
        description='便捷购票,服务您的每一次出行'
        style={{ alignItems: "start" }}
      >
        <ResultPage.Card style={{ height: 64, padding: 8 }}>
          <div className='aaa'>
            <span onClick={() => navigate('/diqu/stor')}>北京</span>
            <span ><UndoOutline /></span>
            <span onClick={() => navigate('/diqu/end')}>上海</span>
          </div>
          <div >
            <span className='bbb'>2025-5-23</span>

            <span >周四</span>
          </div>
          <div style={{ margin: 5 }}>
            <Swiper autoplay>{
              img.map((color, index) => (
                <Swiper.Item key={index}>
                  <Image src={img} />
                </Swiper.Item>
              ))
            }</Swiper>
          </div>
        </ResultPage.Card>


      </ResultPage>

    </div>
  )
}

export default Index
